<template>
    <div class="housedetail">
        <van-nav-bar title="房源详情" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />

        <div class="img">
            <img :src="'http://218.7.112.123:10001/'+houseInfo.pic">
        </div>
        <div class="main">
            <div class="name">
                <span>{{houseInfo.houseType
                }}</span> <span>·</span>
                <span>{{houseInfo.sourceName}}</span>
            </div>
            <div class="price">
                <span>{{houseInfo.price}}</span>
            </div>
            <div class="favor">
                <img src="@/assets/安选房源.png" alt="">
            </div>
            <div class="message">
                <span class="areatext">面积：</span>
                <span>{{houseInfo.areaSize}}</span><span>m<sup style="font-size:12px">2</sup></span>
                <span></span>
            </div>
            <div class="address">
                <span class="areatext">位置：</span>
                <span>{{houseInfo.address}}</span>
            </div>
            <div class="des">
                <div class="description">
                    <span>房源信息</span>
                </div>
                <span>{{houseInfo.description}}</span>
            </div>
            <div class="tel">
                <van-icon name="phone-o" class="phone" />
                <span>联系电话:</span><span class="telephone">{{houseInfo.tel}}</span>
            </div>
        </div>
        <div class="footer">
            <van-goods-action>
                <van-goods-action-icon icon="share-o" text="分享" />
                <van-goods-action-button type="warning" text="在线聊" @click="chatOnline"/>
                <van-goods-action-button type="danger" text="打电话" @click="callOnline" />
            </van-goods-action>
        </div>
    </div>
</template>

<script>
import nav from "@/mixin/nav";
import { houseDetail } from "@/service/house/houseservice";
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
    mixins: [nav],
    data() {
        return {
            id: "",
            houseDetail: {},//本房源的数据
            houseInfo: {}
        }
    },
    async created() {
        this.getId()
        this.id = this.$route.params && this.$route.params.id
        let { data } = await houseDetail(this.id)
        this.houseDetail = data;
        console.log(JSON.parse(JSON.stringify(data.data)));
        this.houseInfo = data.data;
    },
    methods: {
        onSearch(val) {
            //   Toast(val);
            alert(val)
        },
        onCancel() {
            //   Toast('取消');
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        onClickRight() {
            this.$router.push("/")
        },
        getId() {
            this.id = this.$route.params && this.$route.params.id

        },
        chatOnline(){
            Toast('没有接口哦');
        },
        callOnline(){
            Toast('没有接口哦');
        }

    },
}
</script>

<style lang="scss" scoped>
.housedetail {
    width: 100%;
    padding-bottom: 100px;
}

.van-nav-bar {
    width: 100%;
    position: fixed;
    top: 0;
}

.img {
    // margin-top: 46px;
    width: 100%;

    img {
        width: 100%;
    }
}

.main {

    div {
        margin-bottom: 10px;
    }

    // background-color: aquamarine;
    // height: 1000px;
    padding: 10px;

    .name {
        span {
            font-size: 20px;
            font-weight: 800;
        }
    }

    .price {
        span {
            font-size: 24px;
            font-weight: 800;
            color: rgb(255, 85, 46);
        }

    }

    .favor {
        width: 100%;

        img {
            width: 100%;

        }
    }

    .message {
        span {
            font-size: 18px;
            font-weight: 600;
        }

        .areatext {
            font-size: 14px;
            color: #bbb
        }

    }

    .des {
        margin-top: 15px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 5px 0;

        .description {
            span {
                font-size: 20px;
                font-weight: 800;
            }
        }

    }

    .tel {
        span {
            font-size: 20px;
            font-weight: 700;

        }

        .telephone {
            font-size: 16px;
            font-weight: 500;
        }

        .phone {
            color: orange;
            font-size: 20px;
            margin-right: 5px;
            font-weight: 700;

        }
    }

    .address {
        span {
            // font-size: 18px;
            // font-weight: 600;
        }

        .areatext {
            font-size: 14px;
            color: #bbb
        }
    }
}

.footer {
    z-index: 10000000;
    margin-top: 40px;
    position: fixed;
    bottom: 0;
}
</style>